<template>
    <div>
        <Row type="flex" style="margin-bottom: 10px" justify="start">
            <Button icon="md-add" style="margin-right: 10px" class="btnteacher"type="primary" @click="modal.addModel=true">
                添加
            </Button>
            <Button icon="md-trash"  type="error"
                    @click="deleteMoreTeacher">
                批量删除
            </Button>
        </Row>
        <Row type="flex" justify="center">
            <Table :loading="loading" border :columns="userColums" @on-selection-change="changSelection"
                   :data="userlist">
                <template slot-scope="{ row }" slot="action">
                    <Button icon="md-build"  type="primary"
                            size="small"
                            @click="updateTeacher(row)" style="margin-right: 5px">修改
                    </Button>
                    <Button icon="md-trash" type="error"
                            @click="deleteTeacher(row)" size="small">删除
                    </Button>
                </template>
            </Table>
            <Page style="margin-top:10px " show-sizer :total="total" @on-page-size-change="changeSize"
                  :page-size="userMap.Tsize" @on-change="changePage" show-elevator/>
            <addteacher :modal="modal" @addstatus="addstatus"></addteacher>
            <updateteacher :modal="modal" @updatestatus="updatestatus"></updateteacher>
        </Row>
    </div>
</template>

<script>
    import addteacher from "@c/user/user_front/adduser_front"
    import updateteacher from "@c/user/user_front/updateuser_front"

    export default {
        data() {
            return {
                Authoritys: sessionStorage.getItem('userAuthority'),
                modal: {
                    addModel: false,
                    updateModal: false,
                    user: {}
                },
                userlist: [],
                loading: false,
                userMap: {
                    Tpage: 1,
                    Tsize: 10
                },
                deleteMoreUserOfId: [],
                total: 0,
                switchloadin:false,
                userColums: [
                    {type: 'selection', width: 60, align: 'center'},
                    {type: 'index', title: "序号", width: 70, align: 'center'},
                    {title: "登录名", key: "loginName", sortable: true},
                    {title: "用户名称", key: "userName", sortable: true},
                    {title: "是否为公司员工", key: "introduce", sortable: true,
                        render:(h,params)=>{
                        let switchStatus = params.row.isWorkers==1?false:true
                            return <i-switch loading ={this.switchloadin} v-model={switchStatus} onOn-change={this.changeSwitch} >
                                        <span slot="open">是</span>
                                        <span slot="close">否</span>
                                    </i-switch>
                        }
                    },
                    {
                        title: "用户头像", key: "pic", sortable: true, render: (h, params) => {
                            return params.row.pic!=null?<img  style="width:50px;heigth:50px" src={params.row.pic.resourceUrl}/>:<span>无</span>
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            /**
             * 获取全部用户信息
             */
            getAllUser() {
                this.loading = true
                this.http.post("/user/getAlluser", this.qs.parse(this.userMap)).then(res => {
                    if (res.data) {
                        this.userlist = res.data.list
                        this.total = res.data.total
                    }
                }).finally(res => {
                    this.loading = false
                })
            },
            /**
             * 更改添加模态框状态
             * @param val
             */
            addstatus(val) {
                this.modal.addModel = val
            },
            /**
             * 用户信息删除
             * @param row
             */
            deleteTeacher(row) {
                let that = this;
                this.$Modal.confirm({
                    title: "警告",
                    content: "是否要删除该条数据？",
                    onOk() {
                        that.http.post("/user/deleteUser", this.qs.stringify({'id': row.userId})).then(res => {
                            if (res.data) {
                                that.getAllUser()
                                that.$Message.success("删除成功！！")
                            }
                        })
                    },
                    onCancel() {
                        that.$Message.info("操作已取消！")
                    }
                })
            },
            /**
             *批量删除用户信息
             */
            deleteMoreTeacher() {
                if(this.deleteMoreUserOfId.length==0){
                    this.$Message.error("请先选择需要删除的信息")
                    return;
                }
                let that = this;
                this.$Modal.confirm({
                    title: "警告",
                    content: "是否要删除当前选中的信息？",
                    onOk() {
                        console.log(that.deleteMoreUserOfId)
                        that.http.post("/User/deleteMoreUser", that.qs.parse({arrayId: that.deleteMoreUserOfId})).then(res => {
                            if (res.data) {
                                that.getAllUser()
                                that.$Message.success("删除成功！！")
                            }
                        })
                    },
                    onCancel() {
                        that.$Message.info("操作已取消！")
                    }
                })
            },
            /**
             * 点击修改按钮传入该行数据，以及改变模态框状态
             * @param row
             */
            updateTeacher(row) {
                this.modal.user = row
                this.modal.updateModal = true
            },
            updatestatus(val) {
                this.modal.updateModal = val
            },
            /**
             * 点击页码时候进行的翻页
             * @param val
             */
            changePage(val) {
                this.userMap.Tpage = val
                this.getAllUser()
            },
            /**
             *点击条数的时候
             */
            changeSize(val) {
                this.userMap.Tsize = val
                //由于当前页数为1的时候不会去刷新changePage()方法，需要在下面进行刷新
                if (this.userMap.Tpage == 1) {
                    this.getAllUser()
                }
            },
            /**
             * 点击复选框的时候
             * @param val
             */
            changSelection(val) {
                this.deleteMoreUserOfId = []
                val.forEach(index => {
                    this.deleteMoreUserOfId.push(index.userId)
                })
            },
            /**
             * 更改是否为公司员工按钮
             */
            changeSwitch(val){
                this.$Message.info('开关状态：' + val);
            }
        },
        created() {
            this.getAllUser()
        },
        components: {addteacher, updateteacher}
    }
</script>

<style scoped>
</style>
